<template>
  <Box :title="detailTitle" class="service-area-detail" direction="row" v-bind="$attrs">
    <!-- 近7天客车流量 -->
    <Panel class="line-chart" second direction="row">
      <LineChart :seriesData="guestSeriesData" :title="guestTitle" :typeArr="guestArr" :xDate="xDate" />
      <!-- <div class="statistical">
        <div class="same">
          <SequentialSame :data="guestSameData"></SequentialSame>
        </div>
        <div class="car guest"></div>
      </div> -->
    </Panel>

    <!-- 近7天货车流量 -->
    <Panel class="line-chart" second direction="row">
      <LineChart :seriesData="vansSeriesData" :title="vansTitle" :typeArr="vansArr" :xDate="xDate" />
      <!-- <div class="statistical">
        <div class="same">
          <SequentialSame :data="vansSameData"></SequentialSame>
        </div>
        <div class="car vans"></div>
      </div> -->
    </Panel>
    <a-spin class="spin-loading" v-show="spinning" />
  </Box>
</template>

<script>
export default {
  name: 'FlowCarDetail'
}
</script>
<script setup>
/**
 * @desc 客货分析详情(三级)
 * @auther 阳坤
 * @date 2022/11/18
 *
 **/

import Box from '../../components/detail/Box.vue'
import Panel from '../../components/panel'
import LineChart from '../../components/charts/ShadowLine.vue'
import flowApi from '../../api/flow.js'
import { ref, onMounted, computed, defineProps, reactive } from 'vue'
import store from '@/store'
import SequentialSame from '../../components/sequential-same/index.vue'
import { message } from 'ant-design-vue'

const props = defineProps({
  // 数据项
  data: {
    type: Object,
    default: () => {}
  }
})
// 路网类型、省市编码
const roadType = computed(() => store.state.config.roadType)
const areaCode = computed(() => store.state.config.areaCode)
const isProvince = computed(() => store.state.config.isProvince)
// loading
const spinning = ref(false)
// 详情标题
const detailTitle = ref('客货分析')
// 折线时间轴
const xDate = ref([])
// 客车同环比、echarts 标题名称、分类、x轴数据、折线数据
const guestSameData = reactive({ same: null })
const guestTitle = ref('近7天客车流量')
const guestArr = [
  { name: '今年客流', icon: 'rect' },
  { name: '去年客流', icon: 'rect' }
]

const guestSeriesData = ref([
  {
    name: '今年客流',
    color: '#659DFE',
    showLabel: true,
    data: [],
    type: 'bar'
  },
  {
    name: '去年客流',
    color: '#A5D1F8',
    showLabel: true,
    data: [],
    type: 'bar'
  }
])

// 货车同环比、echarts 标题名称、分类、x轴数据、折线数据
const vansSameData = reactive({ same: null })
const vansTitle = ref('近7天货车流量')
const vansArr = [
  { name: '今年货流', icon: 'rect' },
  { name: '去年货流', icon: 'rect' }
]
const vansSeriesData = ref([
  {
    name: '今年货流',
    color: '#4ED9E9',
    showLabel: true,
    data: [],
    type: 'bar'
  },
  {
    name: '去年货流',
    color: '#A9E8EE',
    showLabel: true,
    data: [],
    type: 'bar'
  }
])

onMounted(() => {
  init()
})

/**
 * 初始化
 */
const init = () => {
  getData()
}

/**
 * 获取数据
 */
const getData = () => {
  spinning.value = true
  const params = {
    roadType: roadType.value,
    province: '32',
    city: isProvince.value ? '' : areaCode.value
  }
  flowApi
    .getCarAnalysisDetail(params)
    .then(res => {
      if (res.data) {
        guestSameData.same = res.data.kcTb
        vansSameData.same = res.data.hcTb
        xDate.value = res.data.date
        guestSeriesData.value[0].data = res.data.thisYearKcTotal
        guestSeriesData.value[1].data = res.data.lastYearKcTotal
        vansSeriesData.value[0].data = res.data.thisYearHcTotal
        vansSeriesData.value[1].data = res.data.lastYearHcTotal
      }
    })
    .catch(() => {
      message.error(`数据获取失败！`)
    })
    .finally(() => {
      setTimeout(() => {
        spinning.value = false
      }, 500)
    })
}
</script>

<style scoped lang="less">
@import url(../../styles/themes/index.less);
.service-area-detail {
  .camera {
    width: 30%;
  }

  .line-chart {
    flex: 1;

    .chart {
      flex: 1;
    }

    .statistical {
      width: 110px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-right: 10px;
      padding-top: 40px;

      .same /deep/.sequential-same {
        justify-content: center;
        .sequential {
          display: none;
        }
      }

      .car {
        width: 100%;
        height: 60px;
        margin-top: 10px;

        &.guest {
          background: url('../../assets/images/flow/guest-car.png');
          background-size: 100% 100%;
        }
        &.vans {
          background: url('../../assets/images/flow/vans-car.png');
          background-size: 100% 100%;
        }
      }
    }
  }
}
</style>
